<template>
  <h1>单选组件</h1>
  <el-radio-group v-model="edu">
    <el-radio label="学历：专科" value="zk"></el-radio>
    <el-radio label="学历：本科" value="bk"></el-radio>
    <el-radio label="学历：硕士" value="ss"></el-radio>
    <el-radio label="学历：博士" value="bs"></el-radio>
  </el-radio-group>
  <h4>您选择的学历是：{{edu}}</h4>
  <br>
  <el-radio-group v-model="job">
    <el-radio v-for="item in arr" :label="item.level" :value="item.value"></el-radio>
  </el-radio-group>
  <h4>您选择的职级是：{{job}}</h4>
  <br>
  <el-radio-group v-model="pr">
    <el-radio-button v-for="i in arr1" :value="i.price" :label="i.title"></el-radio-button>
  </el-radio-group>
  <h4>您选择的酒价格是：{{pr}}</h4>
</template>

<script setup>
import {ref} from "vue";

//定义变量用来保存学历单选选中的值
const edu = ref('bk');

//要求:定义数组保存员工职级 员工10 经理20 总监30 总裁40 {level:'员工',value:10}
const arr=ref([
    {level:'员工',value:10},
    {level:'经理',value:20},
    {level:'总监',value:30},
    {level:'总裁',value:40},
    {level:'CEO',value:50}
]);
//遍历此数组,生成单选,在页面中显示 您选择的职级为10
const job = ref(10);

const pr=ref('2500');
//准备数组用来存放原始数据
const arr1=ref([
  {title:'茅台',price:2500},
  {title:'五粮液',price:1800},
  {title:'剑南春',price:1500},
  {title:'泸州老窖',price:1700}
])
</script>


<style scoped>

</style>